<template>
	<view class="generatePoster flex-r-b-c">
		
		<view class="list" v-for="(item,index) in list" :key="index">
			<image :src="item.img" mode="aspectFill"></image>
			<view class="introduce">{{item.title}}</view>
			<view class="btnBox flex-r-a-c">
				<view class="generate btn" style="width: 45%;" v-if="item.is_review == 1"  @tap.stop="preview(item.img)">预览</view>
				<view class="generate btn" v-else @tap.stop="generate(item.id)">生成</view>
				<view class="preservation btn" style="45%" v-if="item.is_review == 1"  @tap.stop="generate(item.id)">重新生成</view>
				
			</view>
		</view>
	
	
		<view class="text" style="width: 100%; text-align: center; font-size: 32rpx; font-weight: bold;">{{titleText}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1, // 页码
				list: [], // 生成海报列表
				titleText: '', // 上拉提示
			};
		},
		onLoad() {
			this.getGeneratePoster()  // 获取生成海报列表
		},
		
		
		onReachBottom() {
			let that = this
			if(that.titleText == ''){ // 防止上拉多次请求
				that.page = that.page+1
				that.getGeneratePoster()
			}
		},
		methods:{
			// 获取生成海报列表
			getGeneratePoster(){
				let that = this
				that.$api.generatePoster_list({page: that.page}).then(res => {
					that.titleText = res.data.data.data.length == 0 ? '暂无数据' : ''
					that.list = that.list.concat(res.data.data.data)
				})
			},
			// 生成海报
			generate(id){
				let that = this
				uni.navigateTo({
					url: '/distribution/canvasPage/canvasPage?id=' + id
				})
				// that.$api.generate_poster({pid: id}).then(res => {
				// 	that.list.forEach(e => {
				// 		if(e.id == id){
				// 			e.img = res.data.data.img
				// 			e.is_review = 1
				// 		}
				// 	})
				// 	uni.showToast({
				// 		title: '生成成功，可点击预览查看',
				// 		icon: 'none'
				// 	})
					
				// })
			},
			
			// 预览
			preview(url){
				let img = []
				img.push(url)
				uni.previewImage({
					current: 0,
					urls: img
				})
			},
			
			// 保存
			preservation(is,url){
				let that = this
				if(is == 0){
					uni.showToast({
						title: '请先生成海报',
						icon: 'none'
					})
				} else {
					uni.downloadFile({
						url,
						success(res){
							if(res.statusCode === 200){
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success(){
										uni.showToast({
											title: '保存成功',
											icon: 'none'
										})
									},
									fail() {
										uni.showToast({
											title: '保存失败',
											icon: 'none'
										})
									}
								})
							}
						}
					})
				}
				
			}
		}
	}
</script>

<style lang="less">
	.generatePoster{
		width: 100vw;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 30rpx;
		.list{
			width: 48%;
			height: auto;
			margin: 20rpx 0rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			image{
				width: 100%;
				height: 400rpx;
				border-radius: 20rpx;
			}
			.introduce{
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
				margin: 20rpx 10rpx;
			}
			.btnBox{
				height: 80rpx;
				.btn{
					width: 40%;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					font-size: 24rpx;
					font-weight: 500;
				}
				.generate{
					width: 90%;
					background-color: #45806E;
					color: #FFFFFF;
					border-radius: 40rpx;
				}
				.preservation{
					border: 1px solid #45806E;
					color: #45806E;
					border-radius: 40rpx;
				}
			}
		}
	}
</style>
